<template>
  <div class="container fz26 txt222">
    <div class="bg-white">
      <div class="p1 border-b">
        <div class="flex">
          <img src="../../assets/icons/bill/shop@2x.png" alt="" class="shop-icon">
          <div class="flex-con">
            订单评分
          </div>
        </div>
      </div>
      <div class="p2">
        <div class="flex">
          <div class="label">
            描述相符
          </div>
          <div class="flex-con">
            <div class="clearfix">
              <template v-for="i in 5">
                <img @click="setDescScore(i)" :key="i" v-if="i<=descScore" src="../../assets/icons/bill/star@2x.png" alt="" class="star-img">
                <img @click="setDescScore(i)" :key="i" v-else src="../../assets/icons/bill/emptystar@2x.png" alt="" class="star-img">
              </template>
            </div>
          </div>
        </div>
        <div class="flex">
          <div class="label">
            物流服务
          </div>
          <div class="flex-con">
            <div class="clearfix">
              <template v-for="i in 5">
                <img @click="setExpressScore(i)" :key="i" v-if="i<=expressScore" src="../../assets/icons/bill/star@2x.png" alt="" class="star-img">
                <img @click="setExpressScore(i)" :key="i" v-else src="../../assets/icons/bill/emptystar@2x.png" alt="" class="star-img">
              </template>
            </div>

          </div>
        </div>
        <div class="flex">
          <div class="label">
            服务态度
          </div>
          <div class="flex-con">
            <div class="clearfix">
              <template v-for="i in 5">
                <img @click="setAtitudeScore(i)" :key="i" v-if="i<=atitudeScore" src="../../assets/icons/bill/star@2x.png" alt="" class="star-img">
                <img @click="setAtitudeScore(i)" :key="i" v-else src="../../assets/icons/bill/emptystar@2x.png" alt="" class="star-img">
              </template>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="hr15"></div>
    <div class="bg-white">
      <div class="p1 border-b">
        <div class="flex">
          <img src="../../assets/icons/bill/comment@2x.png" alt="" class="comment-icon">
          <div class="flex-con">
            填写评价
          </div>
        </div>
      </div>
      <div class="p3">
        <textarea name="content" v-model="content" id="content" class="content" placeholder="说说它的优点和美中不足的地方吧"></textarea>
        <div class="pic-area pic-item-area clearfix">
          <vue-core-image-upload
            class="pic-item"
            :crop="false"
            inputOfFile="file"
            :multiple="true"
            @click.native="beforeUpload"
            @imagechanged="imagechanged"
            @imageuploading="imageuploading"
            @errorhandle="imgerrorhandle"
            :multiple-size="leftImgCount"
            @imageuploaded="imageuploaded"
            :max-file-size="2097152"
            :url="'/util/uploadMultipleFiles'" >
          <img src="../../assets/icons/addbtn.png" alt="" >
          </vue-core-image-upload>            
          <div class="pic-item" v-for="(img,index) in imgSrcs" :key="img">
              <img :src="img|absUrl" alt="" >
              <div class="remove-btn" @click="rmImg(index)">×</div>
          </div>
        </div>
      </div>
    </div>

    <div class="text-center btn-area">
      <button class="submit-btn" @click="doSubmit">
        提交
      </button>
    </div>
  </div>
</template>
<script>
import VueCoreImageUpload from "vue-core-image-upload";
export default {
  components: {
    "vue-core-image-upload": VueCoreImageUpload
  },
  data() {
    return {
      descScore: 0,
      expressScore: 0,
      atitudeScore: 0,
      leftImgCount: 3,
      content: "",
      imgSrcs: []
    };
  },

  methods: {
    beforeUpload(e) {
      if (this.imgSrcs.length >= 3) {
        this.$toast("最多只能上传3张图片");
        e.preventDefault();
      }
    },
    imageuploading(e) {
      this.showLoading();
    },
    imagechanged(e) {
      console.log(arguments);
    },
    imageuploaded(res) {
      this.hideLoading();
      if (res.errcode === 0) {
        this.imgSrcs.push(...res.info);
        let leftImgCount = 3 - this.imgSrcs.length;
        this.leftImgCount = leftImgCount <= 0 ? 0 : leftImgCount;
      }
    },
    rmImg(idx) {
      this.imgSrcs.splice(idx, 1);
    },
    imgerrorhandle(e) {
      if(e == 'FILE NUM OVERLOAD'){
          this.$toast('最多只能上传3张图片');
        }else if(e.indexOf('FILE IS TOO LARGER')!=-1){
           this.$toast('上传文件不能大于2M');
        }
    },
    doSubmit() {
      
      if(!this.descScore){
        this.$toast("请给描述相符评分");
        return;
      }
      if(!this.expressScore){
        this.$toast("请给物流服务评分");
        return;
      }
      if(!this.atitudeScore){
        this.$toast("请给服务态度评分");
        return;
      }
      // if (!this.content) {
      //   this.$toast("说说它的优点和美中不足的地方吧");
      //   return;
      // }
      this.showLoading();
      let postData = Object.assign({}, this.$data);
      postData.imgSrcs = postData.imgSrcs.join(",");
      postData.recordItemId = this.$route.query.itemId;
      this.$post("/api/user/save_comments", postData)
        .then(() => {
          this.hideLoading();
          this.$toast("感谢您的评价");
          history.back();
        })
        .catch(() => {
          this.hideLoading();
        });
    },
    setDescScore(v) {
      this.descScore = v;
    },
    setAtitudeScore(v) {
      this.atitudeScore = v;
    },
    setExpressScore(v) {
      this.expressScore = v;
    }
  }
};
</script>

<style lang="scss" scoped>
html,
body,
.container {
  background-color: #f1f0f0;
}

.btn-area {
  padding-top: 2.7867rem;
  padding-bottom: 2.7867rem;
  .submit-btn {
    width: 5rem;
    margin: 0 auto;
    padding:0.2rem 0;
    border: 2px solid #ff2a2a;
    color: #ff2a2a;
    font-size: 0.3733rem;
    background-color: transparent;
    text-align: center;
    border-radius: 0.1333rem;
  }
}

.p1 {
  padding: 0.28rem 0.4rem;
  .shop-icon {
    width: 0.6rem;
    height: 0.5467rem;
    margin-right: 0.32rem;
  }
}

.label {
  padding-right: 0.36rem;
}

.star-img {
  width: 0.52rem;
  height: 0.4933rem;
  float: left;
  margin-right: 0.1333rem;
}

.p2 {
  padding: 0.4133rem;
  line-height: 0.9067rem;
}

.comment-icon {
  width: 0.6267rem;
  height: 0.6133rem;
  margin-right: 0.32rem;
}

.addbtn-img {
  width: 2rem;
  height: 2rem;
}

.hr15 {
  height: 0.2rem;
}
.pic-item-area {
  padding-top: 0.3733rem;
  
}

.pic-item {
  width: 2rem;
  height: 2rem;
  float:left;
  margin-right: 0.4rem;
  position: relative;
}
.pic-item .remove-btn{
  position: absolute;
  right: -0.1rem;
  top:-0.1rem;
  width:0.4rem;
  height:0.4rem;
  line-height:0.36rem;
  text-align: center;
  background-color: #ff2a2a;
  border-radius: 50%;
  color:white;
  font-size:0.32rem;
}
.pic-item:nth-child(4n){
  margin-right: 0;
}
.pic-item img{
  width: 2rem;
  height: 2rem;
  
}

.p3 {
  padding: 0.44rem 0.4rem;
}

.content {
  height: 2.4rem;
  box-sizing: border-box;
  outline: none;
  width: 100%;
  display: block;
  margin-bottom: 0.4rem;
}
</style>
